<template>
    <div class="box-column container-grid">
        <div class="box-row box-center-start info-el" style="display:flex;justify-content: space-between;">
            <span>
                姓名：{{ infoData.member_xm }}&emsp;&emsp;&emsp;性别：{{
                    sex
                }}&emsp;&emsp;&emsp;
                <template v-if="infoData.phone !== ''">手机号：{{ infoData.phone }}&emsp;&emsp;&emsp;</template>
                <template v-if="infoData.door_card !== ''">卡号：{{ infoData.door_card }}&emsp;&emsp;&emsp;</template>
                <template v-if="infoData.door_pwd !== ''">密码：{{ infoData.door_pwd }}&emsp;&emsp;&emsp;</template>
            </span>
            <span style="float:right">
                <el-button class="btn-blue" @click="goBack" >
                    返回
                </el-button>
            </span>
        </div>
        <el-tabs type="border-card" class="box-flex1">
            <!-- #todu 可以写个数组来管理 -->
            <el-tab-pane v-if="permissionsData.cardQuery && infoData.door_duration !== ''" label="门禁授权" >
                <cardTable :data="infoData"></cardTable>
            </el-tab-pane>
            <el-tab-pane v-if="permissionsData.doorLogQuery" label="开门记录" lazy>
                <logTable :data="infoData"></logTable>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State } from "vuex-class";
import { mixinAccess } from '@/mixin/Access';
import { mixinTabPage } from "@/mixin/tab/Page";
import roomTable from "./room/Table.vue";
import cardTable from "./doorAuth/DoorTable.vue";
import logTable from "./log/Table.vue";
@Component({
    mixins: [mixinTabPage, mixinAccess],
    components: {
        roomTable,
        cardTable,
        logTable
    }
})
export default class parkTenantInfoHome extends Vue {
    @State((state) => state.sharing.sex) sexData: any;
    get sex() {
        return (this as any).queryLabel(
            this.sexData,
            ".member_xb",
            this.infoData.member_xb
        );
    }
    infoData: any = {};
    editInit({ data }) {
        this.infoData = data;
    }
    goBack() {
        const me = this as any;
        const goBack = me.infoData.member_type == 1 ? 'parkTenantTable' : 'parkGuestTable';
        me.go(goBack);
    }
}
</script>
<style scoped lang="scss">
::v-deep.el-tabs {
    @include box-display(column);
    margin-bottom: 10px;

    .el-tabs__content {
        @include box-flex(1);

        .el-tab-pane {
            height: 100%;

            &>div {
                height: 100%;
            }
        }
    }
}</style>
